<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>

  <!--
  getElementById():根据id属性值获取，返回单个对象
  getElementByTagName():根据标签名获取，返回对象数组
  getElementByName():根据name属性获取值，返回对象数组
  getElementByClassName:根据class属性获取值，返回对象数组
   -->
  <img id="img" src="../img/off.gif"/><br>
  <div class="cls">JS</div>
  <div class="cls">Java</div>

  <input type="checkbox" name="hobby"/>唱歌
  <input type="checkbox" name="hobby"/>跳舞
  <input type="checkbox" name="hobby"/>rap
  <input type="checkbox" name="hobby"/>篮球

  <script type="text/javascript">
     //根据id获取img图片
     var img = document.getElementById("img");
     //修改img 对象的图片
     img.src = "../img/on.gif";
     //修改所有的div标签的标签体内容 -> 全部替换成Hello!
     var divs = document.getElementsByTagName("div");
     /*
          style:设置元素的css样式
          innerHTML = innerText : 设置元素内容
     */
     for(let i = 0; i < divs.length ; i++){
       //修改颜色
       divs[i].style.color = 'red';
       //修改内容
       divs[i].innerHTML = "hello!";
     }

     //所有的复选框变成被选中状态 - checked
     //获取所有的复选框
     var hobbys = document.getElementsByName("hobby");
     for (let i = 0; i < hobbys.length; i++) {
       hobbys[i].checked = true;
     }



  </script>

</body>
</html>